<template>
  <div class="view-container">
    <div>
      <el-tabs type="border-card" @tab-click="tabClick" :value="getValue">
        <el-tab-pane v-for="(item,index) in itemList" :key="item.value" :name="item.value.toString()">
          <div slot="label">
            <span class="title" v-text="item.label"></span>
            <span class="count" v-text="item.count"></span>
          </div>
          <el-table
            ref="table"
            :data="tableData"
            stripe
            border
          >
            <el-table-column label="序号" align="center" width="60">
              <template slot-scope="scope">
                {{ (scope.$index+1)+(pageArr[index].index-1)*pageArr[index].size }}
                <!--{{scope.$index+1}}-->
              </template>
            </el-table-column>
            <el-table-column prop="projectCode" label="项目码" align="center" sortable width="100"/>
            <el-table-column prop="projectName" label="项目名称"  sortable />
            <el-table-column prop="zongTouZi" label="总投资(万元)" align="center" sortable width="100"/>
            <el-table-column prop="kaiGongDate" label="开工日期" align="center" :formatter="dateFmt1" sortable width="150"/>
            <el-table-column prop="junGongDate" label="竣工日期" align="center" :formatter="dateFmt2" sortable width="150"/>
            <el-table-column  label="截至本月工作进度" align="center"  />
            <el-table-column  label="下月计划" align="center" />
            <el-table-column  label="存在问题" align="center" />
            <el-table-column prop="projectGaiSuan" label="工程概算(万元)" align="center" sortable width="150"/>
          </el-table>
          <el-pagination
            :page-sizes="[10, 20, 50, 100]"
            style="text-align: right;margin-top: 10px;"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageArr[index].total"
            :page-size="pageArr[index].size"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import myProjectAPI from '@/api/project/myProject'
  export default {
    name: 'MyProject',
    data() {
      return {
        itemList:[],
        pageArr:[],
        tableData:[]
      }
    },
    computed:{
      getValue(){
        return this.itemList.length === 0 ? '' : this.itemList[0].value.toString()
      }
    },
    created() {
      this.getCatagoryList()
    },
    methods: {
      getCatagoryList(){
        myProjectAPI.getCatagoryList({index:1,size:1}).then(res=>{
          /*count: 4, label: "前期管理阶段", value: 1*/
          console.log(res)
          this.itemList = res.result
          this.init()
          this.getList(this.itemList[0].value,this.pageArr[0])
        })
      },
      getList(index,page){
        myProjectAPI.getList(page,index).then(res=>{
          console.log(res)
          this.tableData = res.records
          page.total = res.total
        })
      },
      init(){
        for(let i in this.itemList){
          this.pageArr.push({
            index:1,
            size:10
          })
        }
      },
      dateFmt1(row){
        if(!row.kaiGongDate){
          return ''
        }
        return this._util.formatDateToString(row.kaiGongDate)
      },
      dateFmt2(row){
        if(!row.junGongDate){
          return ''
        }
        return this._util.formatDateToString(row.junGongDate)
      },
      tabClick(val){
        console.log(val.name)
        const page = this.pageArr[parseInt(val.index)]
        this.getList(val.name,page)
      }

    }
  }
</script>

<style scoped lang="scss">
  .count {
    padding: 1px 5px;
    background-color: #FF5722;
    color:white;
    font-size: 12px;
    position: relative;
    left:4px;
    bottom:1px;
    border-radius: 2px;
  }
</style>
